<template>
	<view class="top-nav">
		<view v-for="(item,index) in (tabs.list)" :key="index" :class="tabs.active==item.value?'active':''"
			class="nav-item" @click="tabs.change(item.value)">
			{{ item.name }}
		</view>
	</view>
	<view class="p-l-r-32 bg-color m-t-32">
		<u-form ref="formUserRef" :model="formUser.data" :rules="formUser.rule" v-if="tabs.active == 1">
			<u-form-item required label="企业名称" prop="company_name" borderBottom labelWidth='100'>
				<u--input v-model="formUser.data.company_name" placeholder="企业名称" border="none"></u--input>
			</u-form-item>
			<u-form-item required label="企业征信代码" prop="company_org_code" borderBottom labelWidth='100'>
				<u--input v-model="formUser.data.company_org_code" placeholder="请输入企业征信代码" border="none"></u--input>
			</u-form-item>
			<!--      <u-form-item required label="真实姓名" prop="name" borderBottom labelWidth='100'>-->
			<!--        <u&#45;&#45;input v-model="formUser.data.name" readonly border="none" placeholder="请输入真实姓名"></u&#45;&#45;input>-->
			<!--      </u-form-item>-->
			<!--      <u-form-item required label="手机号" prop="cellphone" borderBottom labelWidth='100'>-->
			<!--        <u&#45;&#45;input v-model="formUser.data.cellphone" readonly border="none" placeholder="请输入手机号"></u&#45;&#45;input>-->
			<!--      </u-form-item>-->
			<u-form-item required label="身份证正面" borderBottom prop="id_card_front_image" customStyle="marginTop:20rpx"
				labelWidth='100'>
				<view class="avatar flex">
					<!-- <u-avatar size="50" :src="formUser.data.id_card_front_image_url"></u-avatar> -->
					<image v-if="formUser.data.id_card_front_image_url" style="width: 150rpx; height: 100rpx;"
						mode="aspectFill" :src="formUser.data.id_card_front_image_url"></image>
					<image v-else style="width: 150rpx; height: 100rpx;" mode="aspectFill"
						src="@/static/images/idcardz.png"></image>
					<view style="margin-left: 40rpx;" @click="uploadAvatarImage('id_card_front_image')">
						<u--text text="上传身份证正面" type="primary"></u--text>
					</view>
				</view>
			</u-form-item>
			<u-form-item required label="身份证反面" borderBottom prop="id_card_back_image" customStyle="marginTop:20rpx"
				labelWidth='100'>
				<view class="avatar flex">
					<!-- <u-avatar size="50" :src="formUser.data.id_card_back_image_url"></u-avatar> -->
					<image v-if="formUser.data.id_card_back_image_url" style="width: 150rpx; height: 100rpx;"
						mode="aspectFill" :src="formUser.data.id_card_back_image_url"></image>
					<image v-else style="width: 150rpx; height: 100rpx;" mode="aspectFill"
						src="@/static/images/idcardf.png"></image>
					<view style="margin-left: 40rpx;" @click="uploadAvatarImage('id_card_back_image')">
						<u--text text="上传身份证反面" type="primary"></u--text>
					</view>
				</view>
			</u-form-item>
			<u-form-item required label="申请理由" prop="remark" borderBottom labelWidth='100'>
				<u--input v-model="formUser.data.remark" border="none" placeholder="请输入申请理由"></u--input>
			</u-form-item>
			<u-form-item>
				<u-button type="primary" @click="formUser.validateForm">提交</u-button>
			</u-form-item>
		</u-form>
		<u-form ref="formCompanyRef" :model="formCompany.data" :rules="formCompany.rule" v-if="tabs.active == 2">
			<u-form-item required label="营业执照" borderBottom prop="business_license" customStyle="marginTop:20rpx"
				labelWidth='100'>
				<view class="avatar flex">
					<!-- <u-avatar size="50" :src="avatarUrl"></u-avatar> -->
					<image v-if="formCompany.data.business_image" style="width: 150rpx; height: 100rpx;"
						mode="aspectFill" :src="formCompany.data.business_image">
					</image>
					<image v-else style="width: 150rpx; height: 100rpx;" mode="aspectFill"
						src="@/static/images/enterprisebg.png"></image>
					<view style="margin-left: 40rpx;" @click="uploadAvatarImage">
						<u--text text="上传营业执照" type="primary"></u--text>
					</view>
				</view>
			</u-form-item>
			<u-form-item required label="登录密码" prop="password" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.password" border="none" type="password"
					placeholder="请输入登录密码"></u--input>
			</u-form-item>
			<u-form-item required label="确认密码" prop="password_confirmation" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.password_confirmation" border="none" type="password"
					placeholder="请输入确认密码"></u--input>
			</u-form-item>
			<u-form-item required label="企业名称" prop="name" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.name" border="none" placeholder="请输入企业名称 (识别)"></u--input>
			</u-form-item>
			<!--      <u-form-item required label="登录手机号"  prop="user_cellphone" borderBottom labelWidth='100'>-->
			<!--        <u&#45;&#45;input v-model="formCompany.data.user_cellphone" readonly border="none" placeholder="主输入登录手机号"></u&#45;&#45;input>-->
			<!--      </u-form-item>-->
			<u-form-item required label="企业征信代码" prop="credit_id" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.credit_id" border="none" placeholder="请输入企业征信代码 (识别)"></u--input>
			</u-form-item>
			<u-form-item required label="法人姓名" prop="legal_name" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.legal_name" border="none" placeholder="请输入法人姓名 (识别)"></u--input>
			</u-form-item>
			<u-form-item required label="法人身份证号" prop="legal_id_card" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.legal_id_card" border="none" placeholder="请输入法人身份证号"></u--input>
			</u-form-item>
			<u-form-item required label="法人手机号" prop="legal_cellphone" borderBottom labelWidth='100'>
				<u--input v-model="formCompany.data.legal_cellphone" maxlength="11" border="none"
					placeholder="请输入法人手机号"></u--input>
			</u-form-item>
			<view class="pass-tip">注：密码需字母与数字组合，最少6位</view>
			<view class="pass-tip" style="padding-left: 60rpx;">企业信息自动识别，如识别有误，请修正。</view>
			<view style="height: 40rpx;"></view>
			<u-form-item>
				<u-button type="primary" @click="formCompany.companyValidateForm">确定</u-button>
			</u-form-item>
		</u-form>
	</view>
	<view style="height: 40rpx;"></view>
	<agreement ref="agreementRef"></agreement>
</template>
<script setup>
	import agreement from "@/components/agreement.vue"
	import {
		reactive,
		ref
	} from 'vue';
	import {
		goBack,
		idCardRegular,
		mobileRegular,
		upload,
		msg
	} from "../../utils/common";
	import {
		idcardOcr
	} from "../../utils/idcardOcr.js";
	import {
		useStore
	} from 'vuex';
	import {
		commonMemberInfo,
		companyStore,
		getMemberCertification,
		memberInfo,
		userStore
	} from "../../api/module/mine";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const store = useStore()
	const agreementRef = ref()
	const userType = store.state.userType;
	const avatarUrl = ref('')
	const tabs = reactive({
		list: [{
			name: '加入企业',
			value: 1,
		}, {
			name: '认证新企业',
			value: 2,
		}],
		active: 2,
		change: function(active) {
			tabs.active = active;
		},
		barStyle: {
			width: '200px',
		}
	})
	const formUserRef = ref(null);
	const formCompanyRef = ref(null);
	onLoad((e) => {
		tabs.active = e.type
	})
	const formUser = reactive({
		data: ref({
			company_name: '',
			remark: '',
			company_org_code: '',
			id_card_back_image: '',
			id_card_front_image: '',
			id_card_back_image_url: '',
			id_card_front_image_url: '',
			business_image: ''
		}),
		rule: ref({
			// cellphone: [{
			//   required: true,
			//   message: '请输入手机号',
			//   trigger: 'blur'
			// }, {
			//   pattern: mobileRegular,
			//   message: '手机号格式不正确',
			//   trigger: 'blur'
			// }],
			company_name: [{
				required: true,
				message: '请输入企业名称',
				trigger: 'blur'
			}, {
				min: 2,
				max: 200,
				message: '企业名称长度为2-200个字符之间',
				trigger: 'blur'
			}, ],
			remark: [{
				required: true,
				message: '请输入备注',
				trigger: 'blur'
			}],
			company_org_code: [{
				required: true,
				message: '请输入企业征信代码',
				trigger: 'blur'
			}],
			// name: [{
			//   required: true,
			//   message: '请输入真实姓名',
			//   trigger: 'blur'
			// }, {
			//   min: 2,
			//   max: 20,
			//   message: '真实姓名长度为2-20个字符之间',
			//   trigger: 'blur'
			// },],
		}),
		validateForm: function() {
			formUserRef.value.validate().then(validate => {
				if (validate) {
					userStore(formUser.data).then(res => {
						goBack();
					})
				}
			});
		}
	});
	const formCompany = reactive({
		data: ref({
			name: "",
			credit_id: "",
			password: "",
			password_confirmation: "",
			legal_name: "",
			legal_id_card: "",
			legal_cellphone: "",
			business_license: [],
		}),
		rule: ref({
			// user_cellphone: [{
			//   required: true,
			//   message: '请输入企业登录手机号',
			//   trigger: 'blur'
			// },
			//   {
			//   pattern: mobileRegular,
			//   message: '企业登录手机号格式不正确',
			//   trigger: 'blur'
			// }],
			name: [{
				required: true,
				message: '请输入企业名称',
				trigger: 'blur'
			}, {
				min: 2,
				max: 200,
				message: '企业名称长度为2-200个字符之间',
				trigger: 'blur'
			}],
			credit_id: [{
				required: true,
				message: '请输入企业征信代码',
				trigger: 'blur'
			}],
			password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			}, {
				min: 6,
				max: 20,
				message: '密码长度为6-20个字符之间',
				trigger: 'blur'
			}],
			password_confirmation: [{
				required: true,
				message: '请输入确认密码',
				trigger: 'blur'
			}, {
				min: 6,
				max: 20,
				message: '密码长度为6-20个字符之间',
				trigger: 'blur'
			}],
			legal_name: [{
				required: true,
				message: '请输入法人姓名',
				trigger: 'blur'
			}, {
				min: 2,
				max: 20,
				message: '法人姓名长度为6-20个字符之间',
				trigger: 'blur'
			}],
			legal_id_card: [{
				required: true,
				message: '请输入法人身份证号',
				trigger: 'blur'
			}, {
				pattern: idCardRegular,
				message: '法人身份证号格式不正确',
				trigger: 'blur'
			}],
			legal_cellphone: [{
				required: true,
				message: '请输入法人手机号',
				trigger: 'blur'
			}, {
				pattern: mobileRegular,
				message: '法人手机号格式不正确',
				trigger: 'blur'
			}],
			// business_license: [
			//   {
			//     required: true,
			//     message: '请选择营业执照',
			//     trigger: 'blur'
			//   }
			// ],
		}),
		companyValidateForm: function() {
			if (!agreementRef.value.checkFn()) {
				msg('请同意服务协议和隐私政策');
				return;
			}
			formCompanyRef.value.validate().then(validate => {
				if (validate) {
					if (!agreementRef.value.checkFn()) {
						msg('请同意服务协议和隐私政策');
						return;
					}
					companyStore(formCompany.data).then(res => {
						msg('已提交，请等待审核')
						setTimeout(() => {
							goBack();
						}, 1200)
					})
				}
			});
		},
	});
	const uploadAvatarImage = (formField) => { //选择图片  转base64
		var formField = formField || '';
		uni.chooseImage({
			count: 1, //上传图片数量
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
			success: (chooseImageRes) => {
				//tempFilePaths 图片的本地文件路径列表
				const tempFilePaths = chooseImageRes.tempFilePaths[0];
				avatarUrl.value = tempFilePaths;
				uni.getFileSystemManager().readFile({
					filePath: tempFilePaths, // 要读取的文件路径
					encoding: 'base64', // 编码格式
					success: function(res) {
						const tempArr = avatarUrl.value.split('.');
						const tempPathArr = avatarUrl.value.split('/');
						const tempExt = tempArr[tempArr.length - 1];
						const tempName = tempPathArr[tempPathArr.length - 1];
						upload({
							tempName: tempName,
							tempPath: avatarUrl.value,
							tempExt: tempExt,
						}, function(response) {
							switch (formField) {
								case 'id_card_back_image':
									formUser.data.id_card_back_image = response.id;
									formUser.data.id_card_back_image_url = response.res
										.url;
									break;
								case 'id_card_front_image':
									formUser.data.id_card_front_image = response.id;
									formUser.data.id_card_front_image_url = response
										.res.url;
									break;
								default:
									formCompany.data.business_license = response.id;
									formCompany.data.business_image = tempFilePaths;
									uni.showLoading({
										title: '营业执照识别中'
									})
									idcardOcr(tempFilePaths, 'business').then((
									data) => {
										formCompany.data.name = data.name;
										formCompany.data.credit_id = data
											.creditcode;
										formCompany.data.legal_name = data
											.frname;
										formCompanyRef.value.validateField(
											'name')
										formCompanyRef.value.validateField(
											'credit_id')
										formCompanyRef.value.validateField(
											'legal_name')
										uni.hideLoading();
									})
							}
						});
					},
					fail(err) {}
				})
			}
		});
	}
</script>
<style lang="scss" scoped>
	.avatar {
		justify-content: space-between;
		align-items: center;
	}
</style>